<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="head.jsp" %>
<title>填写乘客信息</title>
<script type="text/javascript" src="script/jquery.js"></script>
<style>
<!--
.del{display: none;}
ul li {list-style: none}
#addForm,ul {font-size: 12px;}
#addForm ul li span{ display:block; width: 80px; border:solid red 1px; text-align: right; float: left;}
-->
</style>
</head>
<body>
	<div id="person">
		<form action="person_add.shtml" method="post" style="border: 0;">
			<div>填写订单</div>
			<ul>
				<li>登机人信息 </li>
				<li><a href="javascript:void(0)" onclick="addperson();" id="add">添加登机人</a></li>
				<li>
					<table cellpadding="1" cellspacing="1" style="width: 200px; border: solid 1px blue"  id="person_table">
						
					</table>
				</li>
				<li>
					共<label id="count">0</label>位登机人，总价(含燃油机建)<em id="total">&yen;0</em>
				</li>
			</ul>
			<ul>
				<li>
					需要行程单
				</li>
				<li>
				<input type="radio" id="R_N" name="itin" value="0" checked="checked"><label for="R_N">不需要</label>
					<input type="radio" id="R_Y" name="itin" value="1"><label for="R_Y">需要</label>
				</li>
			</ul>
			<button type="submit">确定</button>
		</form>
	</div>
	<div id="addForm" style="display: none;">
		<ul>
			<li><span>姓名</span>
			<input id="person_val" value="" />
			</li>
			<li><span>证件类型</span>
				<select id="cardtype">
					<option value="1">身份证</option>
					<option value="2">护照</option>
					<option value="3">军官证</option>
				</select>
			</li>
			<li><span>证件号码</span>
				<input id="cardid" />
			</li>
			<li><div align="center"><a href="javascript:void(0);" onclick="addPerson();">确定</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="closeAdd();">返回</a></div></li>
		</ul>
	</div>
</body>
<script type="text/javascript">
var count=0;
var price=${amount};
addperson = function(){
	$('#person').hide();
	$('#addForm input').each(function(){
		$(this).empty();
	});
	$('#addForm').show();
};
addPerson = function(){
	var passenger=$('#person_val').val();
	var cardtype = $('#cardtype option:selected').val();
	var cardid = $('#cardid').val();
	$('#person_table').append('<tr><td onclick="remove(this);" style="width:50px;cursor:pointer;">删除</td><td>'+passenger+'</td><td>'+cardid+'<input type="hidden" name="personinfo" value="'+passenger+'_'+cardtype+'_'+cardid+'" /></td></tr>');
	count++;
	refresh(count);
	clearInput();
};
closeAdd = function(){
	$('#addForm').hide();
	$('#person').show();
};
clearInput = function(){
	$('#person_val').val('');
	$('#cardtype').val(1);
	$('#cardid').val('');
	closeAdd();
}
remove=function(obj){
	$(obj).parent('tr').remove();
	count--;
	refresh(count);
}
refresh=function(val){
	if(val<0){val=0;}
	$('#count').html(val);
	$('#total').html(price*val);
}
</script>
</html>